<template>
    <div class="treebox">
      <h2>{{title}}</h2>
      <el-input
          prefix-icon="el-icon-search"
          style="border-radius:0;margin-top:20px"
          clearable
          :placeholder="placeholder"
          :value="value"
          @input="$emit('input',$event)"
          @keypress.enter.native="filterTree"
      />
      <el-tree
          ref="tree"
          v-show="!value || value.trim() === ''"
          :props="defaultProps"
          :load="loadNode"
          lazy
          :expand-on-click-node="true"
          :highlight-current="true"
          :accordion="true"
          @node-click="handleNodeClick"
      ></el-tree>
      <el-tree
          :data="data"
          v-show="value && value.trim() !== ''"
          :props="defaultProps"
          :expand-on-click-node="true"
          :highlight-current="true"
          :accordion="true"
          :default-expand-all="true"
          @node-click="handleNodeClick"
      ></el-tree>
    </div>
  </template>

<script>
export default {
  name: "j-tree",
  inheritAttrs: false,
  props: {
    title: {
      type: String,
      default: '组织目录'
    },
    placeholder: {
      type: String,
      default: '搜索机构'
    },
    value: {
      type: String,
      default: ''
    },
    defaultProps: {
      type: Object,
      default: {
        children: "children",
        label: "code_name"
      }
    },
    searchedData: {
      type: Array,
      default: function () {
        return [];
      }
    },
    loadNode: {
      type: Function,
      required: true
    }
  },
  data() {
    return {
      text: this.value,
      data: []
    }
  },
  methods: {
    filterTree() {
      this.$emit('filter-tree');
    },
    handleNodeClick(data) {
      this.$emit('node-click',data)
    }
  },
  watch: {
    value: function (val) {
      if (val.trim() === '') {
        this.data = [];
      }
    },
    searchedData: function (val) {
      this.data = val;
    }
  }
}
</script>

<style  scoped>
.treebox {
  border-radius: 5px;
  background: #ffffff;
  box-shadow: 0px 0px 8px rgba($color: #bababa, $alpha: 0.3);
  padding: 40px 25px;
  margin-top: 20px;


}
.treebox .el-tree {
  margin-top: 20px;
}

.treebox .tags {
  margin-top: 30px;
  margin-bottom: 30px;
}
</style>
